import { fetchClientList, OpenAApi } from '@/api/userCenter/system/openapi'
import { useStore } from '@/store'
import { computed, reactive } from 'vue'
import { ClientTableState } from '../types'

const useSearchApiList = () => {
  const store = useStore()
  const clientTableState = reactive<ClientTableState>({
    selectedRowKeys: [],
    tableSize: 'small',
    tableData: [],
    tableColumns: [
      {
        title: '接入方',
        dataIndex: 'name',
      },
      {
        title: 'Client ID',
        dataIndex: 'clientId',
      },
      {
        title: 'Client Secret',
        dataIndex: 'clientSecret',
      },
      {
        title: '操作',
        dataIndex: 'options',
        width: 50,
        slots: {
          customRender: 'options',
        },
      },
    ],
  })

  const getClientList = async () => {
    const { data } = await fetchClientList()
    clientTableState.tableData = data
  }
  const fetchClientListLoading = computed(() =>
    store.getters['global/isOpLoading'](OpenAApi.GET_CLIENT_LIST)
  )

  return { clientTableState, getClientList, fetchClientListLoading }
}

export default useSearchApiList
